div(ng-controller='ContentController', ng-switch='progress.status')
    div(ng-switch-default)
        .button-bar.bar-subheader(ng-if='online && options.audio.enabled')
            audio(media-player='audioPlayer', playlist='playlist')
                | Play
            //- button.button.button.icon.ion-ios7-rewind(ng-click='audioPlayer.prev()')
            button.button.button.icon.ion-play(ng-show='!audioPlayer.playing', ng-click='audioPlayer.play()')
            button.button.button.icon.ion-pause(ng-show='audioPlayer.playing', ng-click='audioPlayer.pause()')
            //- button.button.button.icon.ion-ios7-fastforward(ng-click='audioPlayer.next()')
        //- TODO: fix index issue
        span.page(ng-repeat='page in pages', ng-class='{ "arabic-only": options.explanations.ids.length == 0 || !options.explanations.enabled }')
            span.aya(id='{{ aya.gid }}', bindonce, ng-repeat='aya in page', ng-class='{ "item item-text-wrap": aya.explanations.length > 0 }')
                h2.sura-name.item.item-divider(ng-if='aya.aya_id == 1'): b(ng-bind='aya.sura_name')
                span(ng-if='options.reader.arabic_text', ng-click='audioPlayer.play({{ aya.index }})', index='{{ aya.index }}')
                    span.aya-text(colorize='{{ options.reader.colorized }}', colorize-text='{{ aya.text }}', ng-class='{ playing: audioPlayer.currentTrack - 1 == aya.index }')
                    i.aya-number(ng-bind='aya.aya_id_display')
                .explanation-text(ng-repeat='explanation in aya.explanations', bindonce, dir='{{ explanation.direction }}')
                    i.aya-number.explanation-aya-number(ng-if='!options.reader.arabic_text || explanation.language != "ar"') {{ aya.aya_id }}
                    | {{ explanation.text }}

        .item.item-text-wrap(ng-if='view.current < view.total')
            //- button.button.button-block(ng-click='loadMore()') Load More...
            ion-infinite-scroll(on-infinite='loadMore()', distance='20%', icon='ion-loading-c')

    .card.text-center(ng-switch-when='init')
        .item.item-body
            i.icon.placeholder-icon.ion-loading-c.icon-large
            div(ng-if='progress.message')
                h2
                    div(ng-if='options.first_time') Indexing databases for the first time...
                    | {{ progress.message | progress }}
            small(ng-if='options.first_time') This may take a few minutes.
                | Please allow the application to store data for offline use if asked by your browser

    .card.text-center(ng-switch-when='error')
        .item.item-body
            i.icon.placeholder-icon.ion-alert-circled.icon-large
            h2 Something went wrong
            small {{ error.message }}